<template>
	<div class="suspect-item">
		<el-card>
			<template #header>
				<div class="header-bar">
					可疑品管理
					<el-button type="primary" size="small" @click="openEditDialog">新增可疑品</el-button>
				</div>
			</template>

			<!-- 搜索条件 -->
			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="任务编码"><el-input v-model="filters.taskCode" /></el-form-item>
				<el-form-item label="批次"><el-input v-model="filters.batch" /></el-form-item>
				<el-form-item label="物料编码"><el-input v-model="filters.materialCode" /></el-form-item>
				<el-form-item label="名称"><el-input v-model="filters.name" /></el-form-item>
				<el-form-item label="处理状态">
					<el-select v-model="filters.status" clearable>
						<el-option label="待判定" value="待判定" />
						<el-option label="已判定" value="已判定" />
					</el-select>
				</el-form-item>
				<el-form-item label="判定结果">
					<el-select v-model="filters.judgeResult" clearable>
						<el-option label="合格" value="合格" />
						<el-option label="不合格" value="不合格" />
					</el-select>
				</el-form-item>
				<el-button type="primary">搜索</el-button>
				<el-button @click="reset">重置</el-button>
			</el-form>

			<!-- 表格展示 -->
			<el-table :data="filteredList" border stripe>
				<el-table-column prop="taskCode" label="任务编码" width="120" />
				<el-table-column prop="batch" label="批次" width="100" />
				<el-table-column prop="materialCode" label="物料编码" width="100" />
				<el-table-column prop="name" label="物料名称" />
				<el-table-column prop="quantity" label="来料数量" width="100" />
				<el-table-column prop="standard" label="质检标准" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="scope">
						<el-tag :type="scope.row.status === '待判定' ? 'warning' : 'success'">{{ scope.row.status
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="judgeResult" label="判定结果" width="100" />
				<el-table-column prop="judgeQty" label="判定数量" width="100" />
				<el-table-column label="判定依据图" width="120">
					<template #default="scope">
						<el-button v-if="scope.row.image" type="text" size="small"
							@click="viewImage(scope.row.image)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template #default="scope">
						<el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="openJudgeDialog(scope.row)"
							v-if="scope.row.status === '待判定'">判定</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑弹窗 -->
		<el-dialog v-model="editVisible" title="编辑可疑品" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="任务编码"><el-input v-model="form.taskCode" /></el-form-item>
				<el-form-item label="批次"><el-input v-model="form.batch" /></el-form-item>
				<el-form-item label="物料编码"><el-input v-model="form.materialCode" /></el-form-item>
				<el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
				<el-form-item label="来料数量"><el-input-number v-model="form.quantity" :min="0" /></el-form-item>
				<el-form-item label="质检标准"><el-input v-model="form.standard" /></el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="editVisible = false">取消</el-button>
				<el-button type="primary" @click="submitEdit">保存</el-button>
			</template>
		</el-dialog>

		<!-- 判定弹窗 -->
		<el-dialog v-model="judgeVisible" title="可疑品判定" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="判定结果">
					<el-select v-model="form.judgeResult" placeholder="请选择结果">
						<el-option label="合格" value="合格" />
						<el-option label="不合格" value="不合格" />
					</el-select>
				</el-form-item>
				<el-form-item label="判定数量"><el-input-number v-model="form.judgeQty" :min="0" /></el-form-item>
				<el-form-item label="上传依据">
					<el-upload class="upload-demo" accept="image/*" :auto-upload="false" :on-change="handleImageUpload"
						:show-file-list="false">
						<el-button>选择图片</el-button>
						<span v-if="form.image" style="margin-left: 10px;">✔️ 已上传</span>
					</el-upload>
				</el-form-item>

			</el-form>
			<template #footer>
				<el-button @click="judgeVisible = false">取消</el-button>
				<el-button type="primary" @click="submitJudge">保存</el-button>
			</template>
		</el-dialog>
	</div>
	<el-dialog v-model="imageDialogVisible" width="60%" title="判定依据图片">
		<img :src="previewImage" alt="预览图片" style="width: 100%" />
	</el-dialog>

</template>

<script setup>
import { ref, computed } from 'vue'

const list = ref([
	{
		taskCode: 'TASK202501',
		batch: 'BATCH001',
		materialCode: 'MC001',
		name: '材料A',
		quantity: 38,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准1',
		time: '2025-05-12 05:51'
	},
	{
		taskCode: 'TASK202502',
		batch: 'BATCH002',
		materialCode: 'MC002',
		name: '组件B',
		quantity: 39,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 6,
		standard: '标准2',
		time: '2025-05-11 05:51'
	},
	{
		taskCode: 'TASK202503',
		batch: 'BATCH003',
		materialCode: 'MC003',
		name: '零件C',
		quantity: 29,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准3',
		time: '2025-05-10 05:54'
	},
	{
		taskCode: 'TASK202504',
		batch: 'BATCH004',
		materialCode: 'MC004',
		name: '零件C',
		quantity: 95,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 4,
		standard: '标准1',
		time: '2025-05-09 05:54'
	},
	{
		taskCode: 'TASK202505',
		batch: 'BATCH005',
		materialCode: 'MC005',
		name: '组件B',
		quantity: 60,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准2',
		time: '2025-05-08 05:54'
	},
	{
		taskCode: 'TASK202506',
		batch: 'BATCH006',
		materialCode: 'MC006',
		name: '零件C',
		quantity: 12,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 8,
		standard: '标准3',
		time: '2025-05-07 05:54'
	},
	{
		taskCode: 'TASK202507',
		batch: 'BATCH007',
		materialCode: 'MC007',
		name: '零件C',
		quantity: 94,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准1',
		time: '2025-05-06 05:54'
	},
	{
		taskCode: 'TASK202508',
		batch: 'BATCH008',
		materialCode: 'MC008',
		name: '零件C',
		quantity: 55,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 4,
		standard: '标准2',
		time: '2025-05-05 05:54'
	},
	{
		taskCode: 'TASK202509',
		batch: 'BATCH009',
		materialCode: 'MC009',
		name: '零件C',
		quantity: 62,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准3',
		time: '2025-05-04 05:54'
	},
	{
		taskCode: 'TASK2025010',
		batch: 'BATCH0010',
		materialCode: 'MC0010',
		name: '材料A',
		quantity: 100,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 10,
		standard: '标准1',
		time: '2025-05-03 05:54'
	},
	{
		taskCode: 'TASK2025011',
		batch: 'BATCH0011',
		materialCode: 'MC0011',
		name: '零件C',
		quantity: 36,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准2',
		time: '2025-05-02 05:54'
	},
	{
		taskCode: 'TASK2025012',
		batch: 'BATCH0012',
		materialCode: 'MC0012',
		name: '组件B',
		quantity: 57,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 6,
		standard: '标准3',
		time: '2025-05-01 05:54'
	},
	{
		taskCode: 'TASK2025013',
		batch: 'BATCH0013',
		materialCode: 'MC0013',
		name: '零件C',
		quantity: 36,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准1',
		time: '2025-04-30 05:54'
	},
	{
		taskCode: 'TASK2025014',
		batch: 'BATCH0014',
		materialCode: 'MC0014',
		name: '材料A',
		quantity: 93,
		status: '已判定',
		judgeResult: '不合格',
		judgeQty: 8,
		standard: '标准2',
		time: '2025-04-29 05:54'
	},
	{
		taskCode: 'TASK2025015',
		batch: 'BATCH0015',
		materialCode: 'MC0015',
		name: '材料A',
		quantity: 81,
		status: '待判定',
		judgeResult: '',
		judgeQty: '',
		standard: '标准3',
		time: '2025-04-28 05:54'
	}
])

const filters = ref({
	taskCode: '',
	batch: '',
	materialCode: '',
	name: '',
	status: '',
	judgeResult: ''
})

const filteredList = computed(() => {
	return list.value.filter(i => {
		const f = filters.value
		return [
			!f.taskCode || i.taskCode.includes(f.taskCode),
			!f.batch || i.batch.includes(f.batch),
			!f.materialCode || i.materialCode.includes(f.materialCode),
			!f.name || i.name.includes(f.name),
			!f.status || i.status === f.status,
			!f.judgeResult || i.judgeResult === f.judgeResult
		].every(Boolean)
	})
})

const reset = () => {
	filters.value = {
		taskCode: '',
		batch: '',
		materialCode: '',
		name: '',
		status: '',
		judgeResult: ''
	}
}

const editVisible = ref(false)
const judgeVisible = ref(false)
const currentIndex = ref(-1)
const form = ref({})

const imageDialogVisible = ref(false)
const previewImage = ref('')

const viewImage = (img) => {
	previewImage.value = img
	imageDialogVisible.value = true
}


const openEditDialog = (row = null) => {
	editVisible.value = true
	if (row) {
		currentIndex.value = list.value.findIndex(i => i.taskCode === row.taskCode)
		form.value = { ...row }
	} else {
		currentIndex.value = -1
		form.value = {
			taskCode: '',
			batch: '',
			materialCode: '',
			name: '',
			quantity: 0,
			standard: '',
			status: '待判定',
			judgeResult: '',
			judgeQty: '',
			image: ''
		}
	}
}

const handleImageUpload = (file) => {
	const reader = new FileReader()
	reader.onload = () => {
		form.value.image = reader.result  // base64 string
	}
	reader.readAsDataURL(file.raw)
}

const submitEdit = () => {
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = { ...form.value }
	} else {
		list.value.push({ ...form.value })
	}
	editVisible.value = false
}

const openJudgeDialog = (row) => {
	judgeVisible.value = true
	currentIndex.value = list.value.findIndex(i => i.taskCode === row.taskCode)
	form.value = { ...row }
}

const submitJudge = () => {
	form.value.status = '已判定'
	list.value[currentIndex.value] = { ...form.value }
	judgeVisible.value = false
}
</script>

<style scoped>
.suspect-item {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
  
